<template>
    <a-layout>
        <a-layout-sider width="120px">
            <div class="logo">
                <SlackOutlined style="font-size: 18px; color: #1890ff;" />
                <span class="brand">XPOS收银系统</span>
            </div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="onMenuClick">
                <a-menu-group>
                    <a-menu-item key="/checkout">
                        <MoneyCollectOutlined />
                        <span>收银</span>
                    </a-menu-item>
                    <a-menu-item key="/order">
                        <ContainerOutlined />
                        <span>订单</span>
                    </a-menu-item>
                    <a-menu-item key="/goods">
                        <ShoppingOutlined />
                        <span>商品</span>
                    </a-menu-item>
                    <a-menu-item key="/stock">
                        <InboxOutlined />
                        <span>库存</span>
                    </a-menu-item>
                    <a-menu-item key="/chart">
                        <ProjectOutlined />
                        <span>报表</span>
                    </a-menu-item>
                </a-menu-group>
                <a-menu-group>
                    <a-menu-item key="/setting">
                        <SettingOutlined />
                        <span>设置</span>
                    </a-menu-item>
                    <a-menu-item key="/purchase">
                        <ShoppingCartOutlined />
                        <span>采购</span>
                    </a-menu-item>
                    <a-menu-item key="/service">
                        <UserOutlined />
                        <span>客服</span>
                    </a-menu-item>
                </a-menu-group>
            </a-menu>

        </a-layout-sider>
        <a-layout>
            <!-- <a-layout-header>
                <div class="search">
                    <a-input placeholder="Basic usage" style="-webkit-app-region:none;">
                        <template #suffix>
                            <SearchOutlined />
                        </template>
</a-input>
</div>
<div class="action">
    <MinusOutlined @click="handleMinimize" />
    <ExpandOutlined @click="handleMaximize" />
    <CloseOutlined @click="handleClose" />
</div>
</a-layout-header> -->
            <a-layout-content>
                <a-layout-header>
                    <div class="brand">
                        <div class="store-name">洛熙烟酒</div>
                        <div>操作员：老李</div>
                    </div>
                    <div class="menus">
                        <a-menu mode="horizontal" width="100%">
                            <a-menu-item key="1">
                                <LoginOutlined />
                                <span>交班</span>
                            </a-menu-item>
                            <a-menu-item key="2">
                                <UserOutlined />
                                <span>会员</span>
                            </a-menu-item>
                            <a-menu-item key="3">
                                <TransactionOutlined />
                                <span>钱箱</span>
                            </a-menu-item>
                            <a-menu-item key="4">
                                <FieldTimeOutlined />
                                <span>暂离</span>
                            </a-menu-item>
                            <a-menu-item key="5">
                                <PrinterOutlined />
                                <span>打印</span>
                            </a-menu-item>
                            <a-menu-item key="6">
                                <SyncOutlined />
                                <span>同步</span>
                            </a-menu-item>
                            <a-menu-item key="7">
                                <WifiOutlined />
                                <span>网络</span>
                            </a-menu-item>
                        </a-menu>
                        <div class="times">
                            <span>{{ moment(currentDate).format('YYYY-MM-DD') }}</span>
                            <span>{{ moment(currentDate).format('HH:mm:ss') }}</span>
                        </div>
                    </div>
                </a-layout-header>
                <a-layout-content>
                    <RouterView />
                </a-layout-content>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script setup>
import { UserOutlined, SlackOutlined, ContainerOutlined, LoginOutlined, PrinterOutlined, WifiOutlined, SyncOutlined, FieldTimeOutlined, TransactionOutlined, TagOutlined, ProjectOutlined, SearchOutlined, SettingOutlined, ShoppingCartOutlined, ShoppingOutlined, InboxOutlined, MoneyCollectOutlined, ExpandOutlined, MinusOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { RouterView, useRouter } from 'vue-router'
import moment from 'moment';
const router = useRouter();

const selectedKeys = ref(['1'])
const comPorts = ref([]);
const Bauds = [{ label: '300', value: 300 }, { label: '1200', value: 1200 }, { label: '2400', value: 2400 }, { label: '9600', value: 9600 }, { label: '19200', value: 19200 }, { label: '38400', value: 38400 }, { label: '115200', value: 115200 }];
const baudRate = ref(9600)
const currentDate = ref(new Date());
// const currentTime = ref(new Date());
let timerInterval = null;
const updateTime = () => {
    currentDate.value = new Date();
    timerInterval = setInterval(() => {
        updateTime();
    }, 1000);
}

const handleMaximize = () => {
    console.log("close")
    window.ipcRenderer.send('window-max');
}
const handleClose = () => {
    console.log("close")
    window.ipcRenderer.send('window-closed');
}
const handleMinimize = () => {
    window.ipcRenderer.send('window-min');
}

const onMenuClick = (item) => {
    if (item.key == 'logout') {
        localStorage.clear();
        window.ipcRenderer.send('logout');
        router.replace({ path: '/login' })
    }
    router.push({ path: item.key })
}

onMounted(() => {
    updateTime()
})
onUnmounted(() => {
    clearInterval(timerInterval)
})
</script>

<style lang="scss" scoped>
.logo {
    display: flex;
    height: 32px;
    margin: 16px;
    -webkit-app-region: drag;

    .brand {
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        padding-left: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.search {
    padding-left: 6px;
}

.action {
    ::v-deep(.anticon) {
        -webkit-app-region: none;
        cursor: pointer;
        margin-left: 6px;
        margin-right: 6px;

        &:hover {
            color: #1890ff;
        }
    }
}

.ant-layout-sider {
    ::v-deep(.ant-menu-item) {
        height: 60px !important;
        width: calc(100% - 12px);
        margin-inline: 6px;
        padding-inline: 24px;
        padding-top: 2px !important;
        margin-block: 8px;

        .ant-menu-title-content .anticon+span {
            line-height: 1.5 !important;
        }

        .anticon {
            font-size: 24px;
        }

        span {
            font-size: 16px;
        }

        &.ant-menu-item-selected {
            color: #e6f4ff;
            background-color: #1677ff;
        }
    }

    .ant-menu-title-content {
        span {
            text-align: center;
            display: block;
        }
    }
}
</style>